<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import QRCode from 'qrcode'

interface Props {
  /** 需要编码为二维码的字符串 */
  text: string
  /** 显示尺寸（像素）。仅用于<img>尺寸，二维码内部默认按内容自适应 */
  size?: number
  /** 二维码边距 */
  margin?: number
  /** 纠错等级 */
  errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H'
}

const props = defineProps<Props>()

// 默认值处理
const size = computed(() => props.size ?? 240)
const margin = computed(() => props.margin ?? 1)
const level = computed(() => props.errorCorrectionLevel ?? 'M')

// 生成二维码 dataURL
const qrcodeDataUrl = ref('')

const generateQRCode = async () => {
  console.log('generateQRCode', props.text)
  if (!props.text) return
  try {
    const options = {
      errorCorrectionLevel: level.value,
      margin: margin.value,
      width: size.value,
      height: size.value,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    }
    qrcodeDataUrl.value = await QRCode.toDataURL(props.text, options)
  } catch (error) {
    console.error('生成二维码失败:', error)
  }
}

// 监听 text 变化，重新生成二维码
watch(() => props.text, generateQRCode, { immediate: true })
</script>

<template>
  <div v-if="!qrcodeDataUrl"  :style="{ width: size + 'px', height: size + 'px' }" class="block"></div>
  <img 
    v-else
    :src="qrcodeDataUrl" 
    alt="qrcode" 
    :style="{ width: size + 'px', height: size + 'px' }" 
    class="block" 
  />
</template>


